'use client'

import type { PaletteMode } from '@mui/material'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import { type PropsWithChildren, useState } from 'react'
import { Toaster } from 'sonner'

export function ThemeLayout({ children }: PropsWithChildren) {
	const [mode, setMode] = useState<PaletteMode>('dark')
	const defaultTheme = createTheme({ palette: { mode } })

	const toggleColorMode = () => {
		setMode(prev => (prev === 'dark' ? 'light' : 'dark'))
	}

	return (
		<ThemeProvider theme={defaultTheme}>
			<Toaster
				richColors
				theme={mode}
				toastOptions={{
					duration: 8000
				}}
				pauseWhenPageIsHidden={true}
			/>
			{children}
		</ThemeProvider>
	)
}
